<template>
  <div>
    <TopFilter ref="formPanel" :list="topFilterList" :cols="3" :labelWidth="90" @filterChange="searchVehicleOwner"></TopFilter>
    <FilterTable
      ref="table"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'rows'"
      :isSubmitBtn="false"
      :onColumnsChange="columns => (this.columns = columns)"
      :onRowSelectChange="selectChange"
      selectionType="single"
      columnsRef="partPartOutboundPartSalesVehicleOwner"
    ></FilterTable>
    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right'
      }"
    >
      <!-- <el-button @click="add()" type="primary">新增</el-button> -->
      <el-button @click="closeDrawer(1)">关 闭</el-button>
      <el-button type="primary" @click="closeDrawer(2)">保 存</el-button>
    </div>

    <!-- <BaseDialog
      :visible.sync="vehicleAdd"
      title="dialogTitle"
      destroyOnClose
      :containerStyle="{height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}"
    >
        <vehicleAdd @change="change" @close="changeHandleAdd" />
    </BaseDialog>-->
  </div>
</template>

<script>
import { dictionary } from '@/utils/dictMixin';
import { noOrSpell } from '@/api/part/partOut/partSales/index';
// import vehicleAdd from './vehicleAdd';
export default {
  name: 'vehicleOwner',
  mixins: [dictionary],
  //  components: {
  //    vehicleAdd
  // },
  data() {
    this.BaseTable = null;
    return {
      topFilterList: this.createTopFilterList(),
      fetchApi: noOrSpell, // 调用接口
      fetchParams: { xhrAbort: false }, // 调用数据
      columns: this.createTablelist(),
      selectedRows: [],
      vehicleAdd: false
    };
  },
  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;
  },
  methods: {
    createTopFilterList() {
      return [
        {
          type: 'INPUT',
          label: '车主编号',
          fieldName: 'ownerNo'
        },
        {
          type: 'INPUT',
          label: '车主名称',
          fieldName: 'ownerName'
        },
        // {
        //   type: 'INPUT',
        //   label: '车主拼音',
        //   fieldName: 'ownerSpell'
        // },
        // {
        //   type: 'INPUT',
        //   label: '车主手机',
        //   fieldName: 'mobile'
        // },
        // {
        //   type: 'INPUT',
        //   label: 'VIN'
        //   fieldName: 'vin'
        // },
        {
          type: 'INPUT',
          label: '车牌号码',
          fieldName: 'license'
        }
      ];
    },
    closeDrawer(type) {
      console.log(this.selectedRows);
      if (type == 1) {
        this.$emit('close', false);
      } else {
        if (!this.selectedRows.length) {
          return this.$notify({
            title: '提示信息',
            message: '请选择一条数据',
            type: 'warning'
          });
        }
        if (this.selectedRows.some(x => Number(x.COUNT) <= 0)) {
          return this.$notify({
            title: '提示信息',
            message: '请选择一条数据',
            type: 'warning'
          });
        }
        this.$emit('saveDialog', this.selectedRows);
      }
    },
    createTablelist() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '车主编号',
          dataIndex: 'OWNER_NO',
          showOverflowTooltip: true,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '车主名称',
          dataIndex: 'OWNER_NAME',
          showOverflowTooltip: true,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '车主性质',
          dataIndex: 'OWNER_PROPERTY',
          sorter: true,
          editable: false,
          editType: 'select',
          editItems: this.createDictList(8011),
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList(8011)
        },
        // {
        //   title: '车主手机',
        //   dataIndex: 'MOBILE',
        //   sorter: true,
        //   filter: true,
        //   filterType: 'input'
        // },
        {
          title: '车牌号',
          dataIndex: 'LICENSE',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: 'VIN',
          dataIndex: 'VIN',
          width: 150,
          sorter: true,
          showOverflowTooltip: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '地址',
          dataIndex: 'ADDRESS',
          sorter: true,
          width: 180,
          showOverflowTooltip: true,
          filter: true,
          filterType: 'input'
        }
      ];
    },
    searchVehicleOwner(val) {
      const params = Object.assign({}, val, { xhrAbort: false });
      this.fetchParams = params;
    },

    // 选中
    selectChange(rows) {
      this.selectedRows = rows;
    }
  }
};
</script>
